<template>
    <div class="container">
        <div class="public-filter">
            <div style="display: flex">
                <custom-filter
                    @onSubmit="handleInitTable"
                    :selectType="dataType"
                    :selectColor="selectColor"
                    :allSeriesList="allSeriesList"
                    @onReset="handleResetTable"
                    hideEnabled
                ></custom-filter>
            </div>
            <yl-multi-button
                class="multi-action"
                :hideAdd="true"
                :selectedRowKeys="selectedRowKeys"
                @add="handleAddModel"
            ></yl-multi-button>
        </div>

        <div class="container-data">
            <a-table
                :columns="columns"
                :data-source="dataSource"
                :row-key="setRowKey"
                :pagination="pagination"
                :loading="loading"
                @change="handleTableChange"
                class="dept-data__table-table"
            >
                <template v-for="item in columns" :key="item.dataIndex" v-slot:[item.slotName]>
                    <span>{{ t(`yl.${item.slotName}`) }}</span>
                </template>
                <template #longName="{ record }">
                    <span>{{ record.longName ? record.typeName + record.longName : record.typeName }}</span>
                </template>
                <template #priceIsWater="{ record }">
                    <span>{{ record.priceIsWater == true ? t('yl.yes') : t('yl.no') }}</span>
                </template>
                <template #priceIsLight="{ record }">
                    <span>{{ record.priceIsLight == true ? t('yl.yes') : t('yl.no') }}</span>
                </template>
                <template #remark="{ record }">
                    <span>{{ record.remark == '' || record.remark == undefind ? t('yl.naught') : record.remark }}</span>
                </template>
                <template #customAction="{ record }">
                    <a-button class="action-btn" @click="handleEdit(record)" type="primary" size="small">
                        <template #icon>
                            <EditOutlined />
                        </template>
                    </a-button>
                </template>
            </a-table>
        </div>
        <yl-dept-model
            v-if="visible"
            :visible="visible"
            :loading="confirmLoading"
            :title="title"
            :dept="selectedRow"
            :selectColor="selectColor"
            :selectRatio="selectRatio"
            :selectDimension="selectDimension"
            :selectSeries="dataSeries"
            :selectFirm="selectFirm"
            @cancle="handleCancle"
            @submit="handleSubmit"
        ></yl-dept-model>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, computed, createVNode } from 'vue';
import { useI18n } from 'vue-i18n';
import { PaginationQuery } from '@/types/table';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
import { addModel, editModel } from '@/api/warehouse';

import ylMultiButton from '@/components/ylMultiButton.vue';
import customFilter from './components/tableFilter.vue';
import ylDeptModel from './components/deptModel.vue';

import columns from './modelColumns';
import useTables from './modelTables';

export default defineComponent({
    name: 'department',
    components: {
        customFilter,
        ylMultiButton,
        ylDeptModel,
    },
    setup() {
        const { t } = useI18n();
        // 搜索条件
        let {
            tableQuery,
            getModelData,
            selectedRow,
            selectedRowKeys,
            visible,
            getDictDetailData,
            dictNameQuery,
            selectColor,
            selectDimension,
            selectRatio,
            getTypeData,
            typeQuery,
            typeQuery1,
            dataType,
            getSeriesData,
            allSeriesData,
            dataSeries,
            selectFirm,
            allSeriesList,
        } = useTables;
        const state = reactive({
            title: computed(() => (selectedRow.value.id ? t('yl.editDept') : t('yl.addDept'))),
            confirmLoading: false, // 弹窗按钮的loading
        });
        onMounted(() => {
            console.log('执行了');
            getModelData(tableQuery);
            dictNameQuery.dictName = 'dimension,antifreeze,waterproof,light,ratio,color,size,firm';
            getDictDetailData(dictNameQuery);
            getTypeData(typeQuery1);
            allSeriesData();
        });

        // 搜索
        const handleInitTable = (query: PaginationQuery | TableCustomFilter) => {
            tableQuery.page = 0;

            tableQuery = Object.assign({}, tableQuery, { ...query });
            getModelData(tableQuery);
        };
        // 重置
        const handleResetTable = (query: PaginationQuery | TableCustomFilter) => {
            tableQuery = Object.assign({}, tableQuery, { ...query });
            tableQuery.page = 0;
            selectedRowKeys.value = [];
            getModelData(tableQuery);
        };

        // 新增、编辑部门
        const handleSubmit = (dept: NormalObj) => {
            state.confirmLoading = true;
            const msg = dept.id ? t('yl.editSuccess') : t('yl.addSuccess');
            const realRequest = dept.id ? editModel(dept) : addModel(dept);
            return realRequest
                .then(() => {
                    state.confirmLoading = false;
                    message.success(msg);
                    visible.value = false;
                    const timer = setTimeout(() => {
                        handleInitTable(tableQuery);
                        clearTimeout(timer);
                    }, 500);
                })
                .catch(() => {
                    state.confirmLoading = false;
                });
        };
        return {
            ...toRefs(state),
            t,
            columns,
            ...useTables,
            handleInitTable,
            handleResetTable,
            handleSubmit,
        };
    },
});
</script>
<style lang="scss" scoped>
.container {
    width: 100%;
    &-filter {
        @include flex;
        &-item {
            margin-right: 20px;
        }
    }
    &-data {
        padding: $width20 $width0;
        .multi-action {
            background: $white;
        }
        .action-btn + .action-btn {
            margin-left: $width8;
        }
    }
}
</style>
